<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/order.css">
</head>

<body>
    <section class="container">
        <!-- title -->
        <header class="title">
            <h1>确认订单</h1>
        </header>
        <!-- message box -->
        <section class="message">
            <p>
                亲爱的顾客，您前面还有2杯，约<span>8分钟</span>后可取
            </p>
        </section>
        <!-- address -->
        <section class="address">
            <div class="addr-l">
                <p>自提门店</p>
                <p>汉街总部国际E座</p>
                <span>武昌区中北路汉街总部国际一楼大厅</span>
            </div>
            <div class="addr-r">
                <span class="active">自提</span>
                <span>外送</span>
            </div>
        </section>
        <!-- list -->
        <section class="list">
            <div class="goods">
                <div class="info-l">
                    <p class="goods-name">冲绳黑糖拿铁</p>
                    <span class="attr">大/全糖/默认奶油/热</span>
                </div>
                <div class="info-r">
                    <span class="count">X1</span>
                    <span class="price">￥19.9</span>
                </div>
            </div>
            <div class="goods">
                <div class="info-l">
                    <p class="goods-name">冲绳黑糖拿铁</p>
                    <span class="attr">大/全糖/默认奶油/热</span>
                </div>
                <div class="info-r">
                    <span class="count">X1</span>
                    <span class="price">￥19.9</span>
                </div>
            </div>
            <div class="total">
                <p>合计</p>
                <span>￥39.8</span>
            </div>
        </section>
        <!-- pay -->
        <section class="pay">
            <div class="pay-item">
                <p>使用优惠券</p>
                <div>
                    <span>5折全场饮品通用券-￥9.95</span>
                    <a href="#" class="iconfont icon-arrow-right-bold"></a>
                </div>
            </div>
            <div class="pay-item">
                <p>支付方式</p>
                <div>
                    <img src="./img/icon_weixin.png" alt="">
                    <p>微信支付</p>
                    <a href="#" class="iconfont icon-arrow-right-bold"></a>
                </div>
            </div>
            <div class="pay-item">

                <p>特殊备注要求</p>
                <div>
                    <a href="./node.html" class="iconfont icon-arrow-right-bold"></a>
                </div>
            </div>
        </section>
        <!-- agree -->
        <section class="agree">
            <span class="iconfont icon-duigou"></span>
            <p>
                我已阅读并同意&lt;<a href="./payment agreement.html">支付协议</a>&gt;
            </p>
        </section>
        <!-- bottom -->
        <footer class="bottom">
            <div class="total">
                <p>共1件，合计: </p>
                <span>￥39.8</span>
            </div>
            <div class="settle">
                <a href="./order_popup.html">
                    <span>去支付</span>
                </a>
            </div>
        </footer>
    </section>
</body>

</html>